<template>
  <div class="app-container">
    <el-card class="box-card">
      <h3>属性分类</h3>
      <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
        <!-- <el-col :span="12">
          <el-form-item label="品牌" prop="brand">
            <el-input
              v-model="formData.brand"
              placeholder="请输入品牌"
              :maxlength="11"
              show-word-limit
              clearable
              :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="厂商" prop="aa">
            <el-input v-model="formData.aa" placeholder="请输入厂商" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>-->

        <el-col :span="12">
          <el-form-item label="属性分类" prop="extendType">
            <el-select
              v-model="formData.extendType"
              placeholder="请选择属性分类"
              clearable
              :style="{width: '100%'}"
              @change="chgType"
            >
              <el-option v-for="(item, index) in extendTypeOptions" :key="index" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </el-card>

    <el-card class="box-card">
      <h3>分类对应的扩展属性</h3>
      <el-button type="primary" @click="addExtFiled">添加</el-button>
      <el-table :data="extendFileds" style="width: 100%">
        <el-table-column prop="code" label="扩展字段编码"></el-table-column>
        <el-table-column prop="name" label="扩展字段名称"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button @click="addExtFiled(scope.row)" type="primary" size="small">更新</el-button>
            <el-button type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="attributeVisiable" :title="attributeAdd ? '添加扩展属性' : '编辑扩展属性'">
        <el-form
          ref="attributeForm"
          :model="attributeForm"
          status-icon
          label-position="left"
          label-width="100px"
          style="width: 400px; margin-left:50px;"
        >
          <el-form-item label="扩展字段编码" prop="code">
            <el-input v-model="attributeForm.code" />
          </el-form-item>
          <el-form-item label="扩展字段名称" prop="name">
            <el-input v-model="attributeForm.name" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="attributeVisiable = false">取消</el-button>
          <el-button v-if="attributeAdd" type="primary" @click="handleAttributeAdd">确定</el-button>
          <el-button v-else type="primary" @click="handleAttributeEdit">确定</el-button>
        </div>
      </el-dialog>
    </el-card>

    <div class="op-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleEdit">保存</el-button>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { extendType, extFiled, addExtFiled } from "@/api/extend";

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {

      formData: {
        brand: "",
        aa: "",
        extendType: "",
      },
      extendFileds: [],
      extendData: [],
      extendTypeOptions: [],
      attributeVisiable: false,
      attributeAdd: false,
      attributeForm: {},


    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

    //属性分类下拉改变时，扩展属性重新查询展示
    chgType(_val) {
      extFiled(_val).then(res => {
        this.extendFileds = res.data;
      })
    },
    //点击新增属性时，弹出
    addExtFiled(row) {
      //弹窗
      this.attributeVisiable = true;
      //新增or修改
      if (row.code) {
        this.attributeForm = Object.assign({}, row)
        this.attributeAdd = false
      } else {
        this.attributeForm = {}
        this.attributeAdd = true
      }

    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    extendType().then(res => {
      this.extendTypeOptions = res.data;
    });

    // extFiled().then(res => {
    //   this.extendFileds = res.data;
    // })

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped>
.el-card {
  margin-bottom: 10px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.op-container {
  display: flex;
  justify-content: center;
}
</style>
